
<template>
  <div class="top-board-container flex-between">
    <div class="item">
      <div class="top-content flex-column border">
        <span class="top-label">今日收益</span>
        <div class="top-main flex-normal">
          <span class="unit-txt">￥</span>
          <span class="val-txt">{{baseData['intraDayMoney'] || '0.00'}}</span>
          <i :class="['val-icon', baseData['intraDayMoneyTrend'] ? 'el-icon-top' : 'el-icon-bottom']"></i>
        </div>
      </div>
      <div class="bottom-content flex-between">
        <div class="bottom-item flex-column">
          <span class="label-txt">近7天收益</span>
          <div class="bottom-main-item flex-normal">
            <span class="unit-txt">￥</span>
            <span class="val-txt">{{baseData['sevenDayMoney'] || '0.00'}}</span>
          </div>
        </div>
        <div class="bottom-item flex-column">
          <span class="label-txt">近30天收益</span>
          <div class="bottom-main-item flex-normal">
            <span class="unit-txt">￥</span>
            <span class="val-txt">{{baseData['thirtyDayMoney'] || '0.00'}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="top-content flex-column">
        <span class="top-label">今日核销总额</span>
        <div class="top-main flex-normal">
          <span class="unit-txt">￥</span>
          <span class="val-txt">{{baseData['intraDayVerificationMoney'] || '0.00'}}</span>
          <i :class="['val-icon', baseData['intraDayVerificationMoneyTrend'] ? 'el-icon-top' : 'el-icon-bottom']"></i>
        </div>
      </div>
      <div class="bottom-content">
        <div class="bottom-item flex-normal">
          <svg-icon class="val-icon" icon-class="finance-icon-1"></svg-icon>
          <span class="unit-txt">近7天：</span>
          <span class="val-txt">{{baseData['sevenDayVerificationMoney'] || '0.00'}}</span>
        </div>
        <div class="bottom-item flex-normal">
          <svg-icon class="val-icon" icon-class="finance-icon-2"></svg-icon>
          <span class="unit-txt">近30天：</span>
          <span class="val-txt">{{baseData['thirtyDayVerificationMoney'] || '0.00'}}</span>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="top-content flex-column">
        <span class="top-label">平台账户总额</span>
        <div class="top-main flex-normal">
          <span class="unit-txt">￥</span>
          <span class="val-txt">{{baseData['adminBalance'] || '0.00'}}</span>
          <i :class="['val-icon', baseData['adminBalanceTrend'] ? 'el-icon-top' : 'el-icon-bottom']"></i>
        </div>
      </div>
      <div class="bottom-content">
        <div class="bottom-item flex-normal">
          <svg-icon class="val-icon" icon-class="finance-icon-1"></svg-icon>
          <span class="unit-txt">商户余额：</span>
          <span class="val-txt">{{baseData['shopBalance'] || '0.00'}}</span>
        </div>
        <div class="bottom-item flex-normal">
          <svg-icon class="val-icon" icon-class="finance-icon-2"></svg-icon>
          <span class="unit-txt">用户余额：</span>
          <span class="val-txt">{{baseData['userBalance'] || '0.00'}}</span>
        </div>
      </div>
    </div>
    <div class="item setting-item">
      <div class="top-content normal" v-hasPermi="['admin:finance:editRate']">
        <div class="top-label flex-between">
          <span class="label-txt">费率设置</span>
          <div class="label-btn flex-center" @click="showDialog('finance', 'view')">
            <span class="btn-txt">费率设置</span>
          </div>
        </div>
      </div>
      <div class="top-content" v-hasPermi="['admin:finance:editRate']">
        <div class="top-label" style="text-align: right;">
          <div class="label-btn flex-end" @click="jumpUrl('adminWithdrow')">
            <span class="btn-txt">提现</span>
          </div>
        </div>
      </div>
      <div class="bottom-content">
        <div class="bottom-item flex-normal">
          <svg-icon class="val-icon" icon-class="finance-icon-3"></svg-icon>
          <span class="unit-txt">用户支付手续费：</span>
          <span class="val-txt">（网银）{{rateSetting['userPayApr'] || '0'}}元/笔 + {{rateSetting['userPayLpr'] || '0'}}%</span>
        </div>
        <div class="bottom-item flex-normal">
          <svg-icon class="val-icon" icon-class="finance-icon-3"></svg-icon>
          <span class="unit-txt">商户充值手续费：</span>
          <span class="val-txt">{{rateSetting['shopPayLpr'] || '0'}}%</span>
        </div>
        <div class="bottom-item flex-normal">
          <svg-icon class="val-icon" icon-class="finance-icon-3"></svg-icon>
          <span class="unit-txt">用户提现手续费：</span>
          <span class="val-txt">{{rateSetting['userWithdrawLpr'] || '0'}}%</span>
        </div>
        <div class="bottom-item flex-normal">
          <svg-icon class="val-icon" icon-class="finance-icon-3"></svg-icon>
          <span class="unit-txt">商户提现手续费：</span>
          <span class="val-txt">{{rateSetting['shopWithdrawLpr'] || '0'}}%</span>
        </div>
      </div>
    </div>
    <dialog-normal
      ref="dialog-finance"
      :dialog-prop="{
        title: dialogFinance.title,
        height: '55vh',
        width: '60%',
        submit: '确定',
        close: '取消'
      }"
      @normal-submit="submitDialog('finance', dialogFinance.currentItem)"
      >
      <template #dialog-content>
        <el-form
          class="form-content"
          ref="finance-form" label-position="left"
          :model="dialogFinance.currentItem"
          label-width="120px">
          <div class="form-title">入金费率设置</div>
          <el-form-item class="form-content-item" label="用户支付费率：">
            <div class="form-val no-border flex-normal">
              <el-radio-group v-model="dialogFinance.currentItem.carryParty">
                <el-radio :label="0">商户承担</el-radio>
                <el-radio :label="1">平台承担</el-radio>
              </el-radio-group>
            </div>
            <div class="other-content">
              <div class="other-item flex-normal">
                <span class="label-txt">网银</span>
                <div class="item-content">
                  <div class="item-col flex-normal">
                    <span class="title-txt">固定费率：</span>
                    <div class="form-val flex-normal">
                      <el-input placeholder="如：0.5" v-model="dialogFinance.currentItem['userPayApr']"></el-input>
                      <span class="code-unit">元/笔</span>
                    </div>
                  </div>
                  <div class="item-col flex-normal">
                    <span class="title-txt">浮动费率：</span>
                    <div class="form-val flex-normal">
                      <el-input placeholder="如：0.5" v-model="dialogFinance.currentItem['userPayLpr']"></el-input>
                      <span class="code-unit">%</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="other-item flex-normal">
                <span class="label-txt">微信支付</span>
                <div class="item-content">
                  <div class="item-col flex-normal">
                    <span class="title-txt">固定费率：</span>
                    <div class="form-val flex-normal">
                      <el-input placeholder="如：0.5" v-model="dialogFinance.currentItem['userWxPayApr']"></el-input>
                      <span class="code-unit">元/笔</span>
                    </div>
                  </div>
                  <div class="item-col flex-normal">
                    <span class="title-txt">浮动费率：</span>
                    <div class="form-val flex-normal">
                      <el-input placeholder="如：0.5" v-model="dialogFinance.currentItem['userWxPayLpr']"></el-input>
                      <span class="code-unit">%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item class="form-content-item" label="商家充值费率：">
            <div class="other-content">
              <div class="other-item flex-normal">
                <span class="label-txt">虚拟卡支付</span>
                <div class="item-content">
                  <div class="item-col flex-normal">
                    <span class="title-txt">固定费率：</span>
                    <div class="form-val flex-normal">
                      <el-input placeholder="如：0.5" v-model="dialogFinance.currentItem['shopPayApr']"></el-input>
                      <span class="code-unit">元/笔</span>
                    </div>
                  </div>
                  <div class="item-col flex-normal">
                    <span class="title-txt">浮动费率：</span>
                    <div class="form-val flex-normal">
                      <el-input placeholder="如：0.5" v-model="dialogFinance.currentItem['shopPayLpr']"></el-input>
                      <span class="code-unit">%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
          <div class="form-title">出费率设置</div>
          <el-form-item class="form-content-item" label="用户提现费率：">
            <div class="other-content">
              <div class="other-item">
                <div class="item-content">
                  <div class="item-col flex-normal">
                    <span class="title-txt">固定费率：</span>
                    <div class="form-val flex-normal">
                      <el-input placeholder="如：0.5" v-model="dialogFinance.currentItem['userWithdrawApr']"></el-input>
                      <span class="code-unit">元/笔</span>
                    </div>
                  </div>
                  <div class="item-col flex-normal">
                    <span class="title-txt">浮动费率：</span>
                    <div class="form-val flex-normal">
                      <el-input placeholder="如：0.5" v-model="dialogFinance.currentItem['userWithdrawLpr']"></el-input>
                      <span class="code-unit">%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item class="form-content-item" label="商户提现费率：">
            <div class="other-content">
              <div class="other-item">
                <div class="item-content">
                  <div class="item-col flex-normal">
                    <span class="title-txt">固定费率：</span>
                    <div class="form-val flex-normal">
                      <el-input placeholder="如：0.5" v-model="dialogFinance.currentItem['shopWithdrawApr']"></el-input>
                      <span class="code-unit">元/笔</span>
                    </div>
                  </div>
                  <div class="item-col flex-normal">
                    <span class="title-txt">浮动费率：</span>
                    <div class="form-val flex-normal">
                      <el-input placeholder="如：0.5" v-model="dialogFinance.currentItem['shopWithdrawLpr']"></el-input>
                      <span class="code-unit">%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </template>
    </dialog-normal>
  </div>
</template>

<script>
import {
  getMaxInfo, editRate, getFinanceIndex
} from "@/api/financeManage/admin-finance.js";
import {isDecimal} from '@/utils/tools.js'
export default {
  name: "adminFinanceTopBoard",
  components: {
    "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog")
  },
  data() {
    return {
      baseData: {},
      rateSetting: {},
      dialogFinance: {
        title: '费率设置',
        currentItem: {}
      }
    };
  },
  mounted(){
    let _self = this
    _self.queryFinanceIndex()
    _self.getMaxInfo()
  },
  methods: {
    jumpUrl(name){
      let _self = this
      _self.$router.push({name})
    },
    queryFinanceIndex(){
      let _self = this
      getFinanceIndex().then(res => {
        _self.baseData = res.data
      })
    },
    getMaxInfo(){
      let _self = this
      getMaxInfo().then(res => {
        _self.rateSetting = res.data
      })
    },
    // 事件集合 -- 转发
    actionsMaps(ref, acion, row){
      let _self = this
      let actionsMap = () => {
        return new Map([
          [{ref: 'finance', acion: 'view:show'}, ()=>{
            _self.dialogFinance.currentItem = JSON.parse(JSON.stringify(_self.rateSetting))
            let {carryParty} = _self.dialogFinance.currentItem
            if(!carryParty) {
              _self.$set(_self.dialogFinance.currentItem, 'carryParty', 1)
            }
            _self.$nextTick(() => {
              _self.$refs[`dialog-${ref}`].showDialog = true
            })
          }],
          [{ref: 'finance', acion: 'submit'}, ()=>{
            let rules = [
              {name: "userPayApr", label: "网银固定费率"},
              {name: "userPayLpr", label: "网银浮动费率"},
              {name: "userWxPayApr", label: "微信支付固定费率"},
              {name: "userWxPayLpr", label: "微信支付浮动费率"},
              {name: "shopPayApr", label: "商家充值固定费率"},
              {name: "shopPayLpr", label: "商家充值浮动费率"},
              {name: "userWithdrawApr", label: "用户提现费固定费率"},
              {name: "userWithdrawLpr", label: "用户提现费浮动费率"},
              {name: "shopWithdrawApr", label: "商户提现固定费率"},
              {name: "shopWithdrawLpr", label: "商户提现浮动费率"},
            ], message = ''
            rules.forEach(r => {
              if(!isDecimal(`${row[r.name]}`)) return message = r.label
            })
            if(message != '') {
              _self.$refs[`dialog-${ref}`].loading = false
              return _self.$message.error(`请填写正确的${message}`)
            }
            editRate(row).then(res => {
              _self.$message.success('费率设置成功')
              _self.getMaxInfo()
              _self.$nextTick(() => {
                _self.$refs[`dialog-${ref}`].showDialog = false
              })
            }).finally(() => {
              _self.$refs[`dialog-${ref}`].loading = false
            })
          }]
        ])
      }
      let actions = [...actionsMap()].filter(([key,value])=>(key.ref == ref && key.acion == acion))
      actions.forEach(([key,value])=>value.call(this))
    },
    showDialog(ref, type, row) {
      let _self = this;
      if (_self.$refs[`${ref}-form`]) {
        this.resetForm(`${ref}-form`);
      }
      _self.$nextTick(() => {
        _self.actionsMaps(ref, `${type}:show`, row)
      })
    },
    submitDialog(ref, row) {
      let _self = this;
      if(this.$refs[`${ref}-form`]){
        this.$refs[`${ref}-form`].validate((valid) => {
          if (valid) {
            _self.$refs[`dialog-${ref}`].loading = true
            _self.actionsMaps(ref, `submit`, row)
          } else {
            _self.$refs[`dialog-${ref}`].loading = false;
            return false;
          }
        });
      }else{
        _self.$refs[`dialog-${ref}`].loading = true
        _self.actionsMaps(ref, `submit`, row)
      }
    },
  }
};
</script>
<style scoped lang="scss">
.top-board-container {
  align-items: flex-start;
  .border{
    border-bottom: 1px solid #D9DBE9;
  }
  .item{
    padding: vh(20) vw(20);
    &.setting-item .bottom-item{
      .val-icon{
        width: vh(20) !important;
        height: vh(20) !important;
      }
      .unit-txt, .val-txt{
        color: #6E7191 !important;
      }
    }
    .top-content{
      padding-bottom: vh(25);
      margin-bottom: vh(25);
      &.normal{
        padding-bottom: vh(0);
        margin-bottom: vh(0);
      }
      .top-label{
        font-size: vh(16);
        color: #6E7191;
      }
      .top-main{
        margin-top: vh(16);
        color: #14142B;
        font-size: vh(32);
        align-items: baseline;
        .unit-txt{
          margin-right: vw(15);
        }
        .val-icon{
          margin-left: vw(15);
          color: #67C23A;
          &.el-icon-bottom{
            color: #f66157;
          }
        }
      }
      .label-txt{
        color: #1A1A1A;
        font-size: 13px;
      }
      .label-btn{
        height: vh(28);
        padding: vh(0) vw(10);
        background: rgba(128, 193, 250, 0.3);
        border-radius: vh(5);
        cursor: pointer;
        .btn-txt{
          color: #1A1A1A;
          font-size: vh(13);
        }
        &.flex-end{
          display: inline-flex;
          justify-content: end;
          align-items: center;
          margin-top: 8px;
        }
      }
    }
    .bottom-content{
      .bottom-item{
        margin-bottom: vh(10);
        .label-txt{
          font-size: vh(12);
          color: #6E7191;
        }
        .bottom-main-item{
          margin-top: vh(5);
          padding-right: vw(45);
          .unit-txt, .val-txt{
            color: #14142B;
            font-size: vh(20);
            line-height: vh(32);
          }
        }
        .val-icon{
          width: vh(32);
          height: vh(32);
          margin-right: vw(12);
        }
        .unit-txt, .val-txt{
          line-height: vh(26);
          color: #6E7191;
        }
      }
    }
  }
}
.form-content{
  .other-item{
    align-items: baseline;
    .label-txt{
      width: vw(160);
      font-size: 13px;
    }
  }
  .title-txt{
    margin-right: vw(30);
    font-size: 13px;
  }
  .form-content-item{
    position: relative;
    .code-unit{
      width: vw(80);
      font-size: 13px;
    }
  }
  .form-title{
    margin-bottom: vh(20);
    line-height: vh(34);
    font-size: vh(16);
    color: #0003AA;
  }
  .form-val {
    width: vw(160);
    flex-wrap: nowrap;
    &.no-border{
      border: none;
      width: vw(360);
    }
  }
}
</style>